<template xmlns="">
  <div>
    <el-container style="height: 100vh">
      <el-aside :width="sideWidth +'px'" style="background-color: rgb(238, 241, 246);height: 100%">
        <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x:hidden"
                 :collapse="isCollapsed"
                 background-color="rgb(48,65,86)"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 :collapse-transition="false"
                 router
                 :default-active="this.$route.path"
        >
          <div style="height: 40px; line-height: 40px; text-align: center">
            <img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 5px; margin-right: 4px">
            <b style="color: white" v-show="!isCollapsed">智慧员工管理系统</b></div>
          <el-menu-item index="/StaffInfo">
            <i class="el-icon-message"></i>
            <span slot="title">员工信息</span>

          </el-menu-item>

          <el-submenu index="3">
            <template slot="title"><i class="el-icon-document"></i>
              <span slot="title">统计报表</span>
            </template>
            <el-menu-item index="StatisticsTable"
                          @select="handleSelect"
                          :default-active="$route.path">统计报表导出</el-menu-item>
          </el-submenu>
          <el-menu-item index="/ConfigCenter">
            <i class="el-icon-setting"></i>
            <span slot="title">设置中心</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="font-size: 12px; border-bottom: 1px; solid-color: #ccc; line-height: 60px; display: flex">
          <div style="flex:1; font-size: 20px">
      <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse">
      </span>
          </div>
          <el-dropdown style="width: 100px; cursor: pointer">
            <div style="display: inline-block">
              <img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 5px; margin-right: 4px">
              <span>{{ user.username }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
            </div>>
            <el-dropdown-menu slot="dropdown" style="width:100px; text-align: center">
              <el-dropdown-item style="font-size: 14px ;padding: 5px 0">个人信息</el-dropdown-item>
              <el-dropdown-item @click.native="exit" style="font-size: 14px ;padding: 5px 0">退出
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </el-header>

        <el-main>
          <div>    <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>统计报表</el-breadcrumb-item>

          </el-breadcrumb>
          </div>

          <div style="padding: 10px 0">
            <el-input style="width: 200px" placeholder="请输入用户名" suffix-icon="el-icon-search" v-model="username"></el-input>
            <el-input style="width: 200px; margin-left: 10px" placeholder="请输入电话号码" v-model="phone" suffix-icon="el-icon-search"  ></el-input>
            <el-button style="margin-left: 5px; " type="primary" @click="load">搜索</el-button>
            <div>
            <el-button style="margin-left: 5px; margin-top: 5px" type="warning" @click="reload">重置筛选</el-button>
              <el-button type="primary" icon="el-icon-download" @click="open">导出</el-button>
          </div>
          </div>

          <el-table :data="tableData" stripe style="width: 100%" id="table-out">
            <el-table-column prop="id" label="ID" width="50"></el-table-column>

            <el-table-column prop="username" label="用户名" width="80"></el-table-column>

            <el-table-column prop="nickname" label="用户别名" width="80"></el-table-column>

            <el-table-column prop="phone" label="电话" width="120"></el-table-column>

            <el-table-column prop="position" label="职位" width="50"></el-table-column>

            <el-table-column prop="state" label="是否请假" width="50"></el-table-column>

            <el-table-column>
              <template v-slot="scope">

              </template>
            </el-table-column>
          </el-table>
          <div style="padding: 10px 0">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10,20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>
import request from "@/utils/request.js";
import FileSaver from "file-saver";
import XLSX from "xlsx";
import moment from "moment";

export default {
  data() {
    return {
      tableData :[],
      date: [
        moment().subtract(0, 'day').format('YYYY/MM/DD')
      ],
        user:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{},

      total:0,
      pageNum:1,
      pageSize:5,
      username:"",
      phone:"",
      collapseBtnClass:'el-icon-s-fold',
      isCollapsed:false,
    }
  },
  created() {
    this.load()
  },

  methods:{
    collapse(){
      this.isCollapsed=!this.isCollapsed
      if(this.isCollapsed) {
        this.isCollapsed = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
      }else{
        this.collapseBtnClass='el-icon-s-fold'
      }
    },
    exit(){
      this.$router.push('/')
      localStorage.removeItem("user")
    },
    exportExcel(){
      var xlsxParam = { raw: true }
      var wb = XLSX.utils.table_to_book(
          document.querySelector('#table-out'),
          xlsxParam
      )
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
            new Blob([wbout], { type: 'application/octet-stream' }),
            '员工信息导出 '+this.date+'.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    },
    open() {
      this.$confirm('请展开全部表格数据再导出，否则只导出当前页面显示的数据！ 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '导出成功!',
          this:this.exportExcel()
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消导出'
        });
      });

    },
    handleSelect(key, keyPath) {
      this.$router.push(key)
    },
    load() {//请求分页查询数据
      request.get("/page",{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          username:this.username,
          phone:this.phone
        }
      }).then(res=>{
        console.log(res)
        this.total=res.total;
        this.tableData=res.records;
      })
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.load()
    },
    handleCurrentChange(pageNum){
      this.pageNum=pageNum;
      this.load()
    },
    reload(){
      this.username="";
      this.phone="";
      this.load()
    },

  }
}

</script>